import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Star, Download, Eye, Clock } from "lucide-react";

interface ToolCardProps {
  id: string;
  name: string;
  description: string;
  category: "excel" | "html";
  rating: number;
  downloads: number;
  views: number;
  lastUpdated: string;
  author: string;
  tags: string[];
  icon: React.ReactNode;
  featured?: boolean;
}

export function ToolCard({
  name,
  description,
  category,
  rating,
  downloads,
  views,
  lastUpdated,
  author,
  tags,
  icon,
  featured = false
}: ToolCardProps) {
  const categoryColors = {
    excel: "bg-gradient-excel",
    html: "bg-gradient-html"
  };

  const formatNumber = (num: number) => {
    if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
    if (num >= 1000) return `${(num / 1000).toFixed(1)}K`;
    return num.toString();
  };

  return (
    <Card className={`group relative overflow-hidden transition-all duration-300 hover:shadow-card hover:-translate-y-1 ${featured ? 'ring-2 ring-primary animate-glow' : ''}`}>
      <div className={`absolute inset-0 opacity-10 ${categoryColors[category]}`} />
      
      <CardHeader className="relative">
        <div className="flex items-start justify-between">
          <div className="flex items-center space-x-3">
            <div className={`p-2 rounded-lg ${categoryColors[category]} text-white`}>
              {icon}
            </div>
            <div>
              <CardTitle className="text-lg group-hover:text-primary transition-colors">
                {name}
              </CardTitle>
              <p className="text-sm text-muted-foreground">by {author}</p>
            </div>
          </div>
          {featured && (
            <Badge variant="secondary" className="animate-float">
              精选
            </Badge>
          )}
        </div>
      </CardHeader>

      <CardContent className="relative">
        <CardDescription className="text-sm line-clamp-2 mb-4">
          {description}
        </CardDescription>

        <div className="flex items-center space-x-4 text-sm text-muted-foreground mb-4">
          <div className="flex items-center space-x-1">
            <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
            <span>{rating}</span>
          </div>
          <div className="flex items-center space-x-1">
            <Download className="w-4 h-4" />
            <span>{formatNumber(downloads)}</span>
          </div>
          <div className="flex items-center space-x-1">
            <Eye className="w-4 h-4" />
            <span>{formatNumber(views)}</span>
          </div>
        </div>

        <div className="flex flex-wrap gap-1 mb-4">
          {tags.slice(0, 3).map((tag) => (
            <Badge key={tag} variant="outline" className="text-xs">
              {tag}
            </Badge>
          ))}
          {tags.length > 3 && (
            <Badge variant="outline" className="text-xs">
              +{tags.length - 3}
            </Badge>
          )}
        </div>

        <div className="flex items-center text-xs text-muted-foreground">
          <Clock className="w-3 h-3 mr-1" />
          <span>更新于 {lastUpdated}</span>
        </div>
      </CardContent>

      <CardFooter className="relative">
        <div className="flex space-x-2 w-full">
          <Button variant="outline" size="sm" className="flex-1">
            预览
          </Button>
          <Button size="sm" className="flex-1 bg-gradient-primary hover:opacity-90">
            下载
          </Button>
        </div>
      </CardFooter>
    </Card>
  );
}